<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>layout 后台大布局 - Layui</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input autocomplete="off" class="layui-input" lay-verify="required" name="title" placeholder="请输入标题"
                   required
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" lay-verify="required" name="password" placeholder="请输入密码"
                   required
                   type="password">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select lay-verify="required" name="city">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input name="like[write]" title="写作" type="checkbox">
            <input checked name="like[read]" title="阅读" type="checkbox">
            <input name="like[dai]" title="发呆" type="checkbox">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input lay-skin="switch" name="switch" type="checkbox">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input name="sex" title="男" type="radio" value="男">
            <input checked name="sex" title="女" type="radio" value="女">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="desc" placeholder="请输入内容"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="formDemo" lay-submit>立即提交</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>
<script src="../layui/layui.js"></script>
<script>
    layui.use('form', function () {
        const form = layui.form;

        // 监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    })
</script>
</body>
</html>